<template>
	<view class="ticketsContent">
		<u-tabs :list="tabs" name="cate_name" active-color="red" :is-scroll="false" :current="activeTab"
			@change="change"></u-tabs>
		<view v-for="(item,index) in ordersList" :class="activeTab == '0'?'noUse':'use'">
			<view class="item-left">
			     <image class="goodsImg" :src="item.product_image" mode=""></image>
				 <image v-if="item.type == '已过期'" class="delayImg" src="../static/assets/image/delay.png" mode=""></image>
			</view>
			<view class="item-right">
				<p class="item-title">{{item.name}}</p>
				<p class="item-count">数量： {{item.number}}</p>
				<p class="item-date">有效期： {{item.valid_date}}</p>
			</view>
			<button type="default" class="use-btn" :disabled="item.type == '未兑换'?false:true"
				@click="gouse(item)">
				<p v-if="item.type == '未兑换'">立即使用</p>
				<p v-if="item.type == '已兑换'">已兑换</p>
				<p v-if="item.type == '已过期'">已过期</p>
				</button>
		</view>
		<image v-if="ordersList.length<1" class="nodata-img" src="../static/assets/image/no-data.png" mode=""></image>
	</view>
</template>

<script>
	import api from '@/static/js/api.js'
	export default {
		data() {
			return {
				tabs: [{
						cate_name: '未兑换',
						count: ''
					},
					{
						cate_name: '已兑换',
						count: ''
					},
					{
						cate_name: '已过期',
						count: ''
					},
				],
				allgoods: [],
				ordersList: [],
				activeTab: 0,
				personInfo: '',
				paramObj : {
					"0": "未兑换",
					"1": "已兑换",
					"2": "已过期"
				}
			}
		},
		onShow() {
			this.personInfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.getTicketsList('未兑换')
		},
		methods: {
			change(index) {
				this.activeTab = index
				this.ordersList = []
				this.getTicketsList(this.paramObj[this.activeTab])
			},
			gouse(item) {
				uni.navigateTo({
					url: `/pagesB/integral/lotteryCode?img=${item.image}&name=${item.name}&number=${item.number}`
				})
			},
			getTicketsList(type){
				api.ticketsList('exchange.record', '_api_user_redemption_my', this.personInfo.access_token, this.personInfo.uid,type)
					.then(res => {
						this.ordersList = res.data
						this.ordersList = this.ordersList.filter(v => v.type == this.paramObj[this.activeTab])	
					}).catch(e => {
						uni.showToast({
							icon: 'none',
							title: e.message
						})
					})
			}
		}
	}
</script>

<style scoped lang="less">
	.nodata-img {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		width: 600rpx;
	}

	.noUse,
	.use {
		width: 94%;
		height: 196rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		display: flex;
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.item-left {
			width: 28%;
			padding:36rpx 0;
			position: relative;
            .goodsImg{
				width: 130rpx;	
				height: 130rpx;
				margin: 0 30rpx;
				// background: red;
			}
          .delayImg{
			  position: absolute;
			  width: 130rpx;
			  height: 130rpx;
			  top: 36rpx;
			  right: 30rpx;
		  }
		}

		.item-right {
			width: 48%;
			padding: 20rpx 20rpx;

			.item-title {
				font-size: 38rpx;
				color: #333333;
				margin-bottom: 20rpx;
			}

			.item-count {
				font-size: 24rpx;
				color: #999999;
				margin-bottom: 22rpx;
			}

			.item-date {
				font-size: 26rpx;
				color: #666666;
			}
		}

		.use-btn {
			margin-top: 69rpx;
			margin-right: 30rpx;
			width: 23%;
			font-size: 26rpx;
			height: 60rpx;
			line-height: 60rpx;
			color: #FFFFFF;
			padding: 0rpx 10rpx;
			border-radius: 21rpx;
		}

	}

	.noUse {
		background-image: url(../static/assets/image/itemBg.png);

		.item-left {
			.money-style {
				color: #FF1F37;
			}

			.money-type {
				color: #FE4D60;
			}
		}

		.item-right {
			.item-title {
				color: #333333;
			}

			.item-count {
				color: #999999;
			}

			.item-date {
				color: #666666;
			}
		}

		.use-btn {
			background: linear-gradient(146deg, #FE4D60 0%, #FF7C89 100%);
			border: 1px solid #FF7C89;
		}
	}

	.use {
		background-image: url(../static/assets/image/overdue.png);

		.item-left {
			.money-style {
				color: #A9A9A9;
			}

			.money-type {
				color: #A9A9A9;
			}
		}

		.item-right {
			.item-title {
				color: #A9A9A9;
			}

			.item-count {
				color: #A9A9A9;
			}

			.item-date {
				color: #A9A9A9;
			}
		}

		.use-btn {
			background: #A9A9A9;
			border: 1px solid #A9A9A9;
		}
	}
</style>
